/**
 * @author:linjiye
 * @date: 2024/12/26
 * @desc:
 **/

import {Dimensions, Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native'
import React from 'react'
import {useSafeAreaInsets} from "react-native-safe-area-context";
import {FcView} from "@/components/FcView";
import {FcText} from "@/components/FcText";
import {LinearGradient} from "expo-linear-gradient";

type Props = {
    btnName: string,
    disable?: boolean
}

const screenWidth = Dimensions.get('window').width;

const PageFormBtn = ({
                         btnName,
                         style,
                         onPageFormBtnClick,
                         disable = false,
                         disableColors = ['rgba(105,137,255,0.4)', 'rgba(198,94,253,0.4)'],
                         colors = ['rgba(105,137,255,1)', 'rgba(198,94,253,1)']
                     }: Props) => {
    const {bottom} = useSafeAreaInsets()
    const handleClick = () => {
        (onPageFormBtnClick && !disable) && onPageFormBtnClick()
    }
    return (
        <View style={[styles.container, {paddingBottom: bottom + 8}]}>
            <TouchableOpacity activeOpacity={disable?1:0.3} onPress={handleClick}>
                <LinearGradient colors={disable ? disableColors : colors}
                                style={[styles.btn]}
                                start={{x: 1, y: 1}}
                                end={{x: 0, y: 0}}
                >
                    <Text style={[styles.txt, style]}>{btnName}</Text>
                </LinearGradient>
            </TouchableOpacity>
        </View>
    )
}

export default PageFormBtn

const styles = StyleSheet.create({
    container: {
        width: screenWidth,
        height: 60,
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: 'white',
        paddingHorizontal: 27,
        paddingVertical: 8,
        // position: "absolute",
        // bottom: 0
    },
    btn: {
        width: screenWidth - 54,
        height: 44,
        borderRadius: 8,
        justifyContent: "center",

        alignItems: "center"
    },
    txt: {
        color: 'white',
        fontSize: 15,
    }
})